<template>
	<view class="zg-area">
		<view class="content">
			<!-- 轮播图 -->
			<view class="swiper-wapper">
				<swiper :indicator-dots="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in swpList" :key='index' @click="previewImg(item,swpList)">
						<view class="swiper-item">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商品属性 -->
			<view class="spsx">
				<view class="spsx-title1">
					<view>
						<text>{{details.sale}}人</text>
						<text>已砍价成功</text>
					</view>
					<view class="tp-fz26" style="margin-bottom: 6rpx;">价值{{details.kjPrice}}元</view>
				</view>
				<view class="spsx-title">
					{{details.name}}
				</view>
				<view class="bottomimg flex align_center flex_start">
					<image class="tp-img36 tp-ml10" src="../static/kj.png" mode=""></image>
					<text class="tp-fz28 tp-fcF tp-ml10">砍价赢商品!</text>
					<text class="tp-fz22 tp-ml20">砍价商品优惠多,邀请好友一起砍!</text>
				</view>
			</view>
			<view class="dp">
				<view class="dp-top">
					<view class="dp-top-left">
						<image style="border-radius: 8rpx;" :src="`${shopImgUrl}${details.scCover}`" mode="aspectFill"></image>
						<text>{{details.scName}}</text>
					</view>
					<view class="dp-top-right">
						<!-- pagesShop/shop/index1 -->
						<button type="default" @click="pageJumps('/pagesShop/shop/index1?sid=' + details.scId)">进店</button>
					</view>
				</view>
				<view class="dp-bottom">
					<view class="dp-title">
						<image src="/pagesShop/static/sd2.png" mode="widthFix"></image>
						<text class="tp-fc666 tp-fz28">商品详情</text>
						<image src="/pagesShop/static/sd1.png" mode="widthFix"></image>
					</view>
					<view class="dp-p">
						<view class="message">
							<view class="txt">
								<jyf-parser :html="details.description" ref="article"></jyf-parser>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom">
			<view class="ftb-l">
				<view class="ftb-l-item" @click="servive">
					<image src="/pagesShop/static/fb1.png" mode=""></image>
					<text>客服</text>
				</view>
				<view class="ftb-l-item" @click="action3">
					<image v-if="isCon === '0'" src="/pagesShop/static/start2.png" mode=""></image>
					<image v-else src="/pagesShop/static/fb2.png" mode=""></image>
					<text>收藏</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="sharebutton" type="default" open-type="share">
					<view class="ftb-l-item">
						<image src="/pagesShop/static/fb3.png" mode=""></image>
						<text>分享</text>
					</view>
				</button>
				<!-- #endif -->
			</view>
			<view class="ftb-r">
				<button plain @click="openP1">点击免单</button>
			</view>
		</view>
		<!-- 点击免单 -->
		<uni-popup type="bottom" ref="p1" :maskClick="false">
			<view class="sp-a">
				<view class="sp-a-1">
					<view class="spa1-left">
						<view class="spa1-img">
							<image style="border-radius: 8rpx;" :src="wwwImgUrl + details.pic" mode="aspectFill"></image>
						</view>
						<view class="spa1-content">
							<view class="spa1-price">
								<text>{{details.sale}}人</text>
								<text>已砍价成功</text>
							</view>
							<view class="spa1-info">
								价值{{details.kjPrice}}元
							</view>
						</view>
					</view>
					<view class="spa1-right">
						<image @click="closeP1" src="/pagesShop/static/close.png" mode=""></image>
					</view>
				</view>
				<view class="area-1" v-if="address == ''" @click="pageJumps('/pagesUser/addressEdit?sid=' + details.scId)">
					<!-- 跳转到收货地址列表 -->
					<view >请添加收货地址</view><!-- 判断如果没有添加过就跳转到添加界面 -->
					<view class="area-1-right">
						<image src="/pagesShop/static/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="area-1" v-if="address != ''" @click="pageJumps('/pagesUser/addressList?sid=' + details.scId)">
					<view  class="area-1-left" >
						<image src="/pagesShop/static/location.png" mode="widthFix"></image>
						<view class="area-1-left-info">

							<!-- pagesUser/addressList -->
							<template>
								<view class="tp-fc333">
									<text>{{address.name}}</text>
									<text>{{address.phone}}</text>
								</view>
								<view class="tp-fc666">
									<text>{{address.province}}{{address.city}}{{address.area}}</text>
								</view>
								<view class="tp-fc666">
									<text>{{address.address}}</text>
								</view>
							</template>
						</view>
					</view>
					<view class="area-1-right">
						<image src="/pagesShop/static/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="sp-a-4 ">
					<button plain @click="goRouter2"> <text class="tp-fz32">点击免单</text> </button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";

	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				cid: '', //id
				details: '', //详情
				swpList: [], //轮播
				address: '', //默认收货地址
				isCon: 0, //商品收藏状态
				orderid:'',//订单id
			}
		},
		onReady() {
			// 去添加地址
			uni.$on('add-address',data => {
				this.address = data
			})
			// 去选择地址
			uni.$on('select-address',data => {
				this.address = data
			})
		},
		onLoad(opt) {
			this.cid = opt.cid
			this.getDetails1()
			this.getaddress()
			this.isshoucang()
			const scene = opt.scene
			if (scene) {
				this.$store.commit('upInviteCode', scene)
			}
			if (opt.inviteCode) {
				this.$store.commit('upInviteCode', opt.inviteCode)
			} 
		},
		onShareAppMessage(res) {
			console.log(this.$baseUrl + this.details.pic,'res是什么')
			return {
				title: this.details.name,
				path: '/pagesShop/details/kj_details?inviteCode=' + this.getCustomerInfo.inviteCode + '&cid=' + this.cid,
				imageUrl: this.$baseUrl + this.details.pic, 
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetails1()
			this.getaddress()
			this.isshoucang()
		},
		methods: {
			// 根据商品id查询商品详情
			getDetails1() {
				this.swpList = []
				this.$http.post(this.$api.shop_details_1 + '?id=' + this.cid).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						let arr = []
						if (res.data.albumPics != null) {
							arr = res.data.albumPics.split(",")
							arr.forEach(item => {
								if (!item.startsWith('http')) {
									item = this.$imgUrl + item
								}
								this.swpList.push(item)
							})
						}
						this.details = res.data
					}
				})
			},
			//获取默认收货地址
			getaddress() {
				// user_address_1
				this.$http.post(this.$api.user_address_1).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						if (res.data.length) {
							res.data.forEach(item => {
								if (item.status == 0) {
									this.address = item
								}
							})
						} else {
							this.address = ''
						}
					}
				})
			},
			// 商品收藏
			action3() {
				this.$http.get(this.$api.shop_details_4, {
					productId: this.cid, // 商品ID
					type: 3
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						// this.getDetails1()
						this.isshoucang()
					}
				})
			},
			// 客服
			servive() {
				if(this.details.scPhone) {
					uni.makePhoneCall({
						phoneNumber: this.details.scPhone
					})
				} else {
					uni.showToast({
						title:'暂无客服电话',
						icon:'none'
					})
				}
			},
			// 根据用户和商品店铺id查询是否收藏
			isshoucang() {
				this.$http.post(this.$api.shop_list_8, {}, {
					params: {
						id: this.cid, // 商品id
						type: 0
					}
				}).then(res => {
					if (res.code === 200) {
						this.isCon = res.data.status
					}
				})
			},
			// 预览图片
			previewImg(url, arrlist) {
				console.log(url);
				/* let arr = []
				this.list.forEach(item => {
					arr.push(item.url)
				}) */
				uni.previewImage({
					current: url,
					urls: arrlist,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			openP1() {
				this.$refs.p1.open()
			},
			closeP1() {
				this.$refs.p1.close()
			},
			//去砍价界面
			goRouter2() {
				let param = {
					addressId:this.address.id,
					productId:this.cid
				}
				this.$http.post(this.$api.payKjOrder,param).then(res => {
					if(res.code == 200 || res.code == 101 ){
						/* if(res.msg == '已参加活动'){
							return uni.showToast({
								title:'正在参加砍价活动',
								icon:'none'
							})
						} */
							this.orderid = res.data.id
						 uni.navigateTo({
							url: '/pagesShop/details/kj?cid=' + this.cid + '&orderid=' + this.orderid 
						}) 
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottomimg{
		margin-top: 30rpx;
		width: 690rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #FF7A46;

	}
	/*分享 */
	.sharebutton {
		background: transparent;
	
		button {
			padding-right: 0;
		}
	
		&::after {
			border: 0;
		}
	}
	
	.spsx-title1 {
		display: flex;
		align-items: flex-end;
		margin-bottom: 20rpx;

		view {
			&:nth-of-type(1) {
				margin-right: 40rpx;

				text {
					&:nth-of-type(1) {
						font-size: 36rpx;
						color: #FF4A37;
						font-weight: bold;
					}

					&:nth-of-type(2) {
						font-size: 26rpx;
						color: #FF4A37;
					}
				}
			}

			&:nth-of-type(2) {
				color: #999;
			}
		}
	}

	.spsx-title2 {
		margin-top: 20rpx;
		background-color: #ff7a47;
		color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		text {
			&:nth-of-type(1) {
				font-size: 32rpx;
				margin-right: 20rpx;
			}

			&:nth-of-type(2) {
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.sp-a2-title {
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
	}

	.sp-a2-content {
		padding: 10rpx 0;
	}

	.sp-a2-row {
		display: flex;
		align-items: center;

		&:not(:nth-last-of-type(1)) {
			margin-bottom: 20rpx;
		}
	}

	.sp-a2-left {
		width: 200rpx;
		height: 190rpx;
		margin-right: 30rpx;
		background-color: #ff660a;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sp-a2-price {
		margin-bottom: 20rpx;

		text {
			&:nth-of-type(1) {
				font-size: 32rpx;
			}

			&:nth-of-type(2) {
				font-size: 50rpx;
			}
		}
	}

	.sp-a2-type {
		font-size: 24rpx;

		text {
			display: block;
			padding: 8rpx 30rpx;
		}

		view {
			border: 1px solid #fff;
			padding: 8rpx 30rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
		}
	}

	.sp-a2-right {}

	.sp-a2-info1 {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.sp-a2-info2 {
		font-size: 24rpx;
		color: #666;
	}

	.sp-a-4 {
		padding: 30rpx;
		
		button {
			background-color: #FF4A37;
			color: #fff;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44rpx;
		}
	}

	.sp-a {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: relative;
	}

	.sp-a-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.sp-a-1 {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.spa1-left {
		display: flex;
		align-items: center;
	}

	.spa1-right {
		display: flex;
		align-items: flex-start;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.spa1-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.spa1-content {
		
	}

	.sp-a-2 {
		border-bottom: 1px solid #ebebeb;
	}

	.spa2-title {
		font-size: 28rpx;
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.spa2-jbq {
		display: flex;

		image {
			width: auto;
			height: 40rpx;
		}

		input {
			text-align: center;
			width: 40rpx;
			height: 40rpx;
			background-color: #ebebeb;
			min-height: auto;
			font-size: 24rpx;
		}
	}

	.spa2-content {
		display: flex;
		flex-wrap: wrap;
	}

	.spa2-tag {
		font-size: 28rpx;
		padding: 6rpx 20rpx;
		background-color: #ebebeb;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 0;

		&.active {
			background-color: #ffe8e6;
			border: 1px solid $uni-color-error;
			color: $uni-color-error;
		}
	}

	.spa1-price {
		text {
			&:nth-of-type(1) {
				font-size: 36rpx;
				color: #FF4A37;
				font-weight: bold;
			}

			&:nth-of-type(2) {
				font-size: 24rpx;
				color: #FF4A37;
			}
		}
	}

	.spa1-info {
		font-size: 24rpx;
		color: #999;
		margin: 30rpx 0;
	}

	.spa1-text {
		text {
			margin-right: 10rpx;
		}
	}

	.dp {
		background-color: #fff;
	}

	.dp-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;

		image {
			width: 60rpx;
			height: auto;
		}

		text {
			font-size: 28rpx;
			width: 6em;
			text-align: center;
		}
	}

	.dp-p {
		font-size: 28rpx;
		color: #333;
		line-height: 2;
		margin-bottom: 20rpx;
	}

	.dp-bottom {
		padding: 0 30rpx 30rpx;
	}

	.dp-top {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
	}

	.dp-top-left {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333;

		image {
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
	}

	.dp-top-right {
		display: flex;
		align-items: center;

		button {
			width: 130rpx;
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			background: linear-gradient(90deg, #FFAF3C, #FFD879);
			color: #fff;
			border-radius: 24px;
		}
	}

	.pl-row {
		margin: 20rpx 0;
	}

	.pl-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.pl-bottom {
		color: #666;
		line-height: 1.5;
	}

	.pl-left {
		display: flex;
		align-items: center;
	}

	.pl-left-img {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: auto;
		}
	}

	.pl-left-title {
		font-size: 26rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.pl-left-info {
		color: #999;
		font-size: 24rpx;

		text {
			margin-right: 20rpx;
		}
	}

	.pl-right-start {
		display: flex;
		justify-content: flex-end;

		image {
			width: 25rpx;
			height: auto;
		}
	}

	.pl-right-time {
		color: #666;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.pj-tags {
		display: flex;
		margin-top: 30rpx;
	}

	.pj-tag {
		background-color: #feedec;
		color: #666;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.tj {
		background-color: #fff;
		padding: 30rpx;
		margin: 30rpx 0;
	}

	.tj-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tt-left {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;

		&::before {
			content: "";
			display: block;
			width: 8rpx;
			height: 26rpx;
			background-color: $uni-color-primary;
			margin-right: 20rpx;
		}
	}

	.tt-right {
		display: flex;
		align-items: center;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.box1 {
		background-color: #fff;
		margin: 30rpx 0;
	}

	.box1-row {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;

		&:not(:nth-last-of-type(1)) {
			border-bottom: 1px solid #eee;
		}
	}

	.box1-row-left {
		display: flex;
		align-items: center;

		text {
			font-size: 30rpx;
		}

		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.box1-row-right {
		display: flex;
		align-items: center;

		text {
			font-size: 24rpx;
			color: #999;
		}

		.box-tag {
			display: block;
			border: 1px solid $uni-color-error;
			color: $uni-color-error;
			font-size: 24rpx;
			padding: 2rpx 10rpx;
		}

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}

	.spsx {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.spsx-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.spsx-content {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.spsx-content-left {
		text {
			&:nth-of-type(1) {
				color: $uni-color-error;
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

			&:nth-of-type(2) {
				color: #999;
				text-decoration: line-through;
			}
		}
	}

	.spsx-content-right {
		text {
			&:nth-of-type(1) {
				color: #999;
				margin-right: 40rpx;
				font-size: 26rpx;
			}

			&:nth-of-type(2) {
				color: #999;
				font-size: 26rpx;
			}
		}
	}

	.nav {
		position: absolute;
		top: var(--status-bar-height);
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 44px;
	}

	.nav-left,
	.nav-right {
		flex-shrink: 0;
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.nav-center {
		flex-grow: 1;
		text-align: center;
		padding: 0 100rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 400rpx;
		font-size: 36rpx;
		color: #fff;
		opacity: 0.8;
	}

	.swiper-wapper {
		height: 550rpx;
		position: relative;
	}

	.swiper-item {
		image {
			width: 100%;
			height: 550rpx;
		}
	}

	.content {
		padding-bottom: 60px;
	}

	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		// padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftb-l {
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		/* #ifdef H5 */
		flex: 1;
		justify-content: space-around;
		/* #endif */

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx;
		}
	}

	.ftb-l-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #333;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			color: #fff;
			font-size: 32rpx;
			padding: 0;
			width: 400rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ff700a;
			border-radius: 0;
		}
	}

	.area-1 {
		border-top: 1px solid #eee;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.area-1-left {
		display: flex;
		align-items: center;

		image {
			width: 44rpx;
			height: 48rpx;
			margin-right: 30rpx;
		}
	}

	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			&:nth-of-type(1) {
				font-size: 26rpx;

				text {
					margin-right: 20rpx;
				}
			}

			&:nth-last-of-type(1) {
				margin-bottom: 0
			}
		}
	}

	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;

		image {
			width: 14rpx;
			height: auto;
		}
	}
</style>
